
<template>
  <div class="">
    <div class="top">
      <a href="#" style="font-size:10px">回到顶部</a>
    </div>
    <!-- {{ productData.list }} -->
    <el-button @click="drawer = true" style="margin-left: 10px;margin-top:-5px ; background-color:#7232dd;color:#ffff ">
      创建分类
    </el-button>
    <el-drawer title="分类内容" :visible.sync="drawer" :direction="direction">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        ><template slot-scope="scope">
          <el-form-item label="分类名称" prop="name" style="width: 100%">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="分类图标" prop="photo">
            <!-- 上传图片并且显示缩略图 -->
            <el-upload
              class="avatar-uploader"
              :action="uploadFileURL"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <!-- 预览图片 -->
              <img
                style="height: 100px"
                v-if="imageUrl"
                :src="imageUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(scope.row)"
              >立即创建</el-button
            >
            <!-- <el-button @click="resetForm">清除名称</el-button> -->
          </el-form-item>
        </template>
      </el-form>
    </el-drawer>

    <div class="delete">
      <div class="delete1">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      ref="formInline"
    >
      <template slot-scope="scope">
        <el-form-item label="">
          <el-select v-model="formInline.id" placeholder="选择分类">
            <el-option
              v-for="item in proCategory.list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="onSubmit(scope.row)">删除</el-button>
        </el-form-item></template
      >
    </el-form>
    </div>
    </div>

     <div class="ss">
       <div class="ss1">
    <el-collapse
      :v-model="activeNames"
      @change="handleChange"
      v-for="item in proCategory.list"
      :key="item.id"
    >
      <img :src="item.icon" alt="" height="100px" />

      <el-collapse-item :title="item.name" :name="item.id">
        <el-popover
          v-for="array in productData.list"
          :key="array.id"
          v-if="item.name == array.category.name"
          placement="bottom"
          title="介绍"
          width="200"
          trigger="click"
          :content="
            array.description + kge + array.price + yuan + line + array.unit
          "
        >
          <el-button slot="reference">{{ array.name }}</el-button>
        </el-popover>
      </el-collapse-item>
    </el-collapse>
    </div>
     </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";

import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      activeNames: ["1"],
      imageUrl: "",
      page: 1,
      pageSize: 5,
      showFileURL: "http://121.199.29.84:8888/group1/",
      // 项目基础路径和文件上传路径
      uploadFileURL: "http://121.199.29.84:8001/file/upload",
      yuan: "元",
      kge: "___________",
      line: "/",
      visible: false,
      drawer: false,
      direction: "rtl",
      formInline: {
        id: "",
      },
      ruleForm: {
        name: "",
        // uploadFileURL
        icon: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
      },

      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        id: "",
        name: "",
        icon: "",
      },
      formLabelWidth: "120px",
    };
  },
  // 计算属性
  computed: {
    ...mapState("menu", ["proCategory", "productData", "deleteById"]),
  },

  created() {
    this.getProCategoryData(), this.getProductData();
    // this.getDeleteByIdData();
  },

  // 组件方法
  methods: {
    ...mapActions("menu", [
      "getProCategoryDataVuex",
      "getProductDataVuex",
      "getDeleteByIdDataVuex",
    ]),
    // handleAvatarSuccess() {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    //   // 表单对象中的photo字段进行赋值
    //   this.productForm.photo = this.showFileURL + res.data.id;
    // },
    onSubmit() {
      this.$refs["formInline"].validate((valid) => {
        if (valid) {
          get("productCategory/deleteById", this.formInline).then((res) => {
            if (res.status == 200) {
              this.$notify({
                title: "成功",
                message: res.message,
                type: "success",
              });
              // 刷新页面数据
              this.getProductData();
              // this.loading = false;
              // this.dialogVisible = false;
            } else {
              this.$notify({
                title: "失败",
                message: res.message,
                type: "danger",
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    beforeAvatarUpload() {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传商品图片大小不能超过 3MB!");
      }
    },
    handleChange(val) {
      // console.log(val);
    },
    handleAvatarSuccess(res, file) {
      // 生成一个图片的本地路径 在上传按钮的位置进行一个预览
      this.imageUrl = URL.createObjectURL(file.raw);
      // 表单对象中的photo字段进行赋值
      this.ruleForm.icon = this.showFileURL + res.data.id;
      // console.log(this.ruleForm.photo);
    },
    // 图片上传之前做的处理
    beforeAvatarUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传商品图片大小不能超过 3MB!");
      }
    },
    imgFinish() {
      this.loading = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    getProCategoryData() {
      let param = {
        page: 1,
        pageSize: 200,
        name: "",
      };
      this.getProCategoryDataVuex(param);
    },
    getProductData() {
      this.loading = true;
      // 设置参数
      let param = {
        page: 1,
        pageSize: 200,
      };
      // 调用vuex中对应的方法
      this.getProductDataVuex(param);
    },
    addProduct() {
      this.dialogVisible = true;
    },
    // 发送求获取分类数据
    getDeleteByIdData() {
      let param = { id: 1 };
      this.getDeleteByIdDataVuex(param);
    },

    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          post("productCategory/saveOrUpdate", this.ruleForm).then((res) => {
            if (res.status == 200) {
              this.$notify({
                title: "成功",
                message: res.message,
                type: "success",
              });
              // 刷新页面数据
              this.getProductData();
              // this.loading = false;
              // this.dialogVisible = false;
            } else {
              this.$notify({
                title: "失败",
                message: res.message,
                type: "danger",
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(ruleForm) {
      this.$refs["ruleForm"].resetFields();
    },
  },
  changeFrom(proObj) {
    // 表单对象 = 当前行的数据
    // 对象深拷贝和浅拷贝
    this.form = { ...proObj };
    // 对图片做一个赋值 图片预览的地址 = 真实的图片数据
    this.imageUrl = this.form.icon;
    // 1.修改模态框的标题
    this.dialogTitle = "修改产品信息";
    // 2.弹出模态框
    this.dialogVisible = true;
  },
  resetForm2(form) {
    this.$refs["form"].resetFields();
  },
};
</script>


<style scoped>
.ss{
  display: flex;
  margin-top: 20px;
  width: 100%;
}
.ss1{
  width: 100%;
}
.delete{
  position: relative;
}
.delete1{
  position: absolute;
  top:-25px;
  right: 10px;
}
.top {
  text-align: center;
  width: 75px;
  /* font-size: 10px; */
  background-color: #7232dd;
  color: white;
  position: fixed;
  bottom: 40px;
  right: 40px;
}
</style>
